<template>
  <el-form label-width="100px">
    <!-- label-width="100px"可以实现一行显示 -->
    <h6>机构信息</h6>
    <el-row>
      <el-col :span="8">
        <el-form-item label="机构编号">
          <el-input v-model="branchesForm.id" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="机构名称">
          <el-input v-model="branchesForm.name" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="机构类型">
          <el-input v-model="branchesForm.type" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="机构地址" class="address">
          <el-select v-model="branchesForm.provinceId" width="500px" placeholder="选择省">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="branchesForm.cityId" placeholder="选择市">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="branchesForm.countyId" placeholder="选择区/县">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="详细地址">
          <el-input v-model="branchesForm.address" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="经度">
          <el-input v-model="branchesForm.latitude" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="维度">
          <el-input v-model="branchesForm.longitude" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="机构负责人">
          <el-input v-model="branchesForm.managerName" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="机构电话">
          <el-input v-model="branchesForm.phone" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col class="col-button">
        <el-button type="danger">编辑</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'InstitutionFrom',
  components: {},
  props: {},
  data() {
    return {
      branchesForm: {
        id: '',
        address: '',
        cityId: '',
        countyId: '',
        extra: '',
        latitude: '',
        longitude: '',
        managerName: '',
        name: '',
        parent: {
          id: '',
          name: '',
          subAgencies: '',
          type: ''
        },
        parentId: '',
        phone: '',
        provinceId: '',
        status: '',
        type: ''
      },
      options: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
form{
    width: 100%;
    height: 390px;
    background-color: #fff;
    margin: 20px 0;
    font-size: 14px;
    color: #20232A;
    h6{
      background-color: #fafafa;
      height: 55.28px;
      font-size: 18px;
      line-height: 55.28px;
      padding-left: 20px;
      margin: 0 0 30px 0;
    }
    .address{
    .el-select{
      width: 33.3333%;
    }
    }
    .col-button{
      text-align: center;
    }
    .el-row{
      margin-right:20px;
    }
}
</style>
